// DetailsScreen.js
import React from "react";
import { View, Text } from "react-native";
import useRem from "../rem/rem";
export default function DetailsScreen() {
  const rem = useRem();
  // const tou=require('../assets/tou.jpg')
  const ke = require("../assets/ke.png");
  return (
    <View
      style={{
        padding: "0",
        margin: "0",
        overflow: "auto",
        width: rem(375),
        height: rem(693),
        boxSizing: "border-box",
      }}
    >
      <Text>
        <div style={{ width: rem(375), height: rem(44), lineHeight: "44px" }}>
          <span style={{ marginLeft: "10px", fontSize: "18px" }}>
            <b>我的</b>
          </span>
        </div>
        <div
          style={{ width: rem(375), height: rem(650), background: "(#E4E4E4)" }}
        >
          <div
            style={{
              background: "#199ED8",
              width: rem(375),
              height: rem(138 - 42),
              paddingTop: rem(42),
            }}
          >
            <div
              style={{
                width: rem(315),
                height: rem(117),
                background: "white",
                marginLeft: rem(30),
                display: "flex",
              }}
            >
              <div style={{ width: rem(96), height: rem(96) }}>
                <img
                  src="https://tse3-mm.cn.bing.net/th/id/OIP-C.vlG7jSBGBwXlhyIBdRlnDwHaJQ?rs=1&pid=ImgDetMain"
                  alt=""
                  style={{
                    width: rem(96),
                    height: rem(96),
                    borderRadius: "50%",
                    marginLeft: "20px",
                    marginTop: "10px",
                  }}
                />
              </div>
              <div style={{ marginLeft: rem(40), marginTop: rem(20) }}>
                <h3>陈平安</h3>
              </div>
            </div>
          </div>
          <div
            style={{
              width: rem(375),
              height: rem(105),
              lineHeight: "20px",
              marginTop: "30px",
            }}
          >
            <div
              style={{
                width: rem(375),
                height: rem(69 - 15),
                background: "white",
                display: "flex",
                paddingTop: rem(15),
              }}
            >
              <div
                style={{
                  width: rem(59),
                  height: rem(44),
                  background: "white",
                  textAlign: "center",
                  paddingLeft: rem(40),
                }}
              >
                <b style={{ fontSize: "16px" }}>200</b>
                <br></br>
                <span>积分</span>
              </div>
              <div
                style={{
                  width: rem(59),
                  height: rem(44),
                  background: "white",
                  textAlign: "center",
                  paddingLeft: rem(60),
                }}
              >
                <b style={{ fontSize: "16px" }}>10</b>
                <br></br>
                <span>收藏</span>
              </div>
              <div
                style={{
                  width: rem(59),
                  height: rem(44),
                  background: "white",
                  textAlign: "center",
                  paddingLeft: rem(60),
                }}
              >
                <b style={{ fontSize: "16px" }}>20</b>
                <br></br>
                <span>评价</span>
              </div>
            </div>
          </div>
          <ul
            style={{
              width: rem(375),
              height: "59px",
              background: "white",
              listStyle: "none",
              lineHeight: "59px",
              margin: "0",
              padding: "0",
              borderBottom: "1px solid",
            }}
          >
            <li style={{ float: "left" }}>
              <img src={ke} alt="" />
            </li>
            <li style={{ float: "left" }}>
              <span>我的课程</span>
            </li>
            <li style={{ marginLeft: rem(300) }}>
              <span style={{ fontSize: "20px" }}>></span>
            </li>
          </ul>
          <ul
            style={{
              width: rem(375),
              height: "59px",
              background: "white",
              listStyle: "none",
              lineHeight: "59px",
              margin: "0",
              padding: "0",
              borderBottom: "1px solid",
            }}
          >
            <li style={{ float: "left" }}>
              <img src={ke} alt="" />
            </li>
            <li style={{ float: "left" }}>
              <span>我的礼品</span>
            </li>
            <li style={{ marginLeft: rem(300) }}>
              <span style={{ fontSize: "20px" }}>></span>
            </li>
          </ul>
          <ul
            style={{
              width: rem(375),
              height: "59px",
              background: "white",
              listStyle: "none",
              lineHeight: "59px",
              margin: "0",
              padding: "0",
              borderBottom: "1px solid",
            }}
          >
            <li style={{ float: "left" }}>
              <img src={ke} alt="" />
            </li>
            <li style={{ float: "left" }}>
              <span>我的下载</span>
            </li>
            <li style={{ marginLeft: rem(300) }}>
              <span style={{ fontSize: "20px" }}>></span>
            </li>
          </ul>
          <ul
            style={{
              width: rem(375),
              height: "59px",
              background: "white",
              listStyle: "none",
              lineHeight: "59px",
              margin: "0",
              padding: "0",
              borderBottom: "1px solid",
            }}
          >
            <li style={{ float: "left" }}>
              <img src={ke} alt="" />
            </li>
            <li style={{ float: "left" }}>
              <span>我的考试</span>
            </li>
            <li style={{ marginLeft: rem(300) }}>
              <span style={{ fontSize: "20px" }}>></span>
            </li>
          </ul>
          <ul
            style={{
              width: rem(375),
              height: "59px",
              background: "white",
              listStyle: "none",
              lineHeight: "59px",
              marginTop: "0",
              marginBottom: "0",
              padding: "0",
              borderBottom: "1px solid",
            }}
          >
            <li style={{ float: "left" }}>
              <img src={ke} alt="" />
            </li>
            <li style={{ float: "left" }}>
              <span>地址管理</span>
            </li>
            <li style={{ marginLeft: rem(300) }}>
              <span style={{ fontSize: "20px" }}>></span>
            </li>
          </ul>
          <div
            style={{
              width: rem(375),
              height: rem(107-30),
              background: "white",
              listStyle: "none",
              lineHeight: "100px",
              paddingTop:'30px',
              marginTop: "0",
              // paddingTop:'20px',
            }}
          >
            <div
              style={{
                width: rem(314),
                height: rem(43),
                lineHeight: "43px",
                background: "#199ED8",
                margin: "0 auto",
                // marginTop:'20px',
                // paddingTop:'20px',
                color: "white",
                textAlign: "center",
                border: "1px #0079FE solid",
              }}
            >
              退出登录
            </div>
          </div>
        </div>
      </Text>
    </View>
  );
}
